<!-- 生产数据趋势图 -->
<script lang="ts" setup>
import MyChart from '@/components/MyChart.vue'
import { ref, watch } from 'vue'
const props = defineProps(['data'])
const maxValue = parseInt(props.data.max)
const minValue = parseInt(props.data.min)

const doData = (data:any) => {
  // 创建包含12个月的空数组
  const result = Array(30).fill('');

  // 填充实际数据
  data.forEach((item,index) => {
    result[index] = item
  });

  return result;
}

// 获取柱形颜色的函数
const getBarColor = (value: number, max: number, min: number) => {
  if (value > max) {
    // 超过上限 - 红色渐变
    return {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: 'rgba(255, 77, 79, 0.8)' }, // 较深的红色
        { offset: 1, color: 'rgba(255, 77, 79, 0.2)' }  // 较浅的红色
      ]
    }
  } else if (value < min) {
    // 低于下限 - 黄色渐变
    return {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: 'rgba(250, 173, 20, 0.8)' }, // 较深的黄色
        { offset: 1, color: 'rgba(250, 173, 20, 0.2)' }    // 较浅的黄色
      ]
    }
  } else {
    // 正常范围 - 原始蓝色渐变
    return {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: 'rgba(15, 198, 194, 0.7)' },
        { offset: 1, color: 'rgba(15, 198, 194, 0.1)' }
      ]
    }
  }
}

const options = ref({
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    show: true,
    icon: 'circle',
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 97,
    textStyle: {
      color: '#ebeef5',
      fontSize: 24
    },
    data: []
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      boundaryGap: true,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        color: '#ebeef5',
        fontSize: 18,
        interval: 0,
        margin: 10
      },
      axisTick: {
        show: false,
        alignWithLabel: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#182758',
          width: 1
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: minValue - (maxValue - minValue) * 0.1,
      max: maxValue + 1,
      nameTextStyle: {
        color: 'rgba(255,255,255,0.85)',
        fontSize: 20,
        align: 'right',
        padding: [0, 5, 8, 0]
      },
      axisLabel: {
        formatter: '{value}',
        color: '#ebeef5',
        fontSize: 20,
        align: 'right'
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#ff6600',
          width: 2
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#182758',
          width: 1
        }
      }
    },
  ],
  dataZoom: [{
    type: 'inside',
    filterMode: 'none'  // 不过滤极值点
  }],
  series: [
    {
      name: '',
      type: 'bar',
      color: '#0FC6C2',
      smooth: true,
      symbol: 'true',
      showSymbol: false,
      barWidth: 30,
      barGap: '0%', // 柱间无间隙
      barCategoryGap: '10px',
      markLine: {
        data: [
          { name: '下限', yAxis: 2 }, // 水平线
          { name: '上限', yAxis: 9 }
        ],
        label: { show: true },
        lineStyle: {
          color: '#f1e5a7',     // 橙色线条
          width: 1,             // 线宽
          type: 'dashed'        // 虚线
        },
      },
      itemStyle: {
        color: (params: any) => getBarColor(params.value, maxValue, minValue)
      },
      //   yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ''
        }
      },
      data: []
    }
  ]
})

watch(
  () => props.data,
  (val) => {
    const {legendList, timeList, targetList, actualList,max,min } = val
    options.value.xAxis[0].data = doData(timeList)
    options.value.series[0].data = actualList
    options.value.series[0].markLine.data[0].yAxis = min
    options.value.series[0].markLine.data[1].yAxis = max
    options.value.yAxis[0].min = 0
    options.value.yAxis[0].max = max + 1
  },
  {
    deep: true, // 开启深度监听
    immediate: true // 立即触发一次（可选）
  }
)
</script>
<template>
  <MyChart height="160px" :option="options" />
</template>
